<template>
  <div id="orderDetail">
    <Header :showBack="true"></Header>
    <div class="rootMain">
      <div class="topImg">
        <img src="@/assets/img/new1/reac/top1.png" alt />
        <div>
          <p>{{$t('m.actT')}}</p>
          <p>{{$t('m.actT1')}}</p>
        </div>
      </div>
      <div class="con">
        <div class="conInfo">
          <p>{{$t('m.redEnvelope1')}}：{{data.gccAmount}} GCC</p>
          <p>{{$t('m.actNum')}}：{{inviteNum}}{{$t('m.person')}}</p>
          <!-- <img src="@/assets/img/icon1.png" alt class="icon1" /> -->
        </div>
        <h4>{{$t('m.actRuler')}}：</h4>
        <div>
          <p>{{$t('m.actTip1')}}{{data.startTime}} ~ {{data.endTime}}</p>
          <p>{{$t('m.actTip2')}}</p>
          <p>{{$t('m.actTip3')}}</p>
          <p>{{$t('m.actTip4')}}</p>
        </div>
        <div>
          <a href="javascript:void(0);" class="btn" @click="copyShaneUrl">{{$t('m.invitationLink')}}</a>
          <input type="text" :value="copyUrl" id="copyInput" v-show="false" />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Services from "@/service/index.js";
import Header from "@/components/header";
import { mapMutations } from "vuex";
import { Toast } from "vant";
export default {
  data() {
    return {
      loginToken: "",
      data: {},
      userObj: {},
      copyUrl: "",
      inviteNum: "0"
    };
  },
  created() {
    this.changeTitle(this.$t("m.actName"));
    this.loginToken = localStorage.getItem("token")
      ? localStorage.getItem("token")
      : "";
    Services.getUser({
      token: this.loginToken,
      lang: localStorage.getItem("language")
    }).then(res => {
      if (res.code == "0000") {
        this.userObj = res.user;
        let _url = window.location.href.replace("act", "reg");
        this.copyUrl = _url + "&code=" + res.user.referrerCode;
//      console.log(this.copyUrl);
        Services.getActivity({
          token: this.loginToken,
          id: 1,
          lang: localStorage.getItem("language")
        }).then(response => {
//        console.log(response);
          this.data = response.activity;
          this.inviteNum = response.inviteesNum;
        });
      } else {
        this.$router.push(`/login`);
        sessionStorage.setItem("loginBack", true);
        Toast(res.msg);
      }
    });
    //获取活动详情
    Services.activityEdit({
      id: this.$route.query.id,
      lang: localStorage.getItem("language")
    }).then(response => {
      if (response.code == "0000") {
      }
    });
  },
  components: {
    Header
  },
  computed: {},
  methods: {
    ...mapMutations(["changeTitle"]),
    copy(id, attr) {
      let target = null;
      if (attr) {
        target = document.createElement("div");
        target.id = "tempTarget";
        target.style.opacity = "0";
        if (id) {
          let curNode = document.querySelector("#" + id);
          target.innerText = curNode[attr];
        } else {
          target.innerText = attr;
        }
        document.body.appendChild(target);
      } else {
        target = document.querySelector("#" + id);
      }

      try {
        let range = document.createRange();
        range.selectNode(target);
        window.getSelection().removeAllRanges();
        window.getSelection().addRange(range);
        document.execCommand("copy");
        window.getSelection().removeAllRanges();
        Toast(this.$t("m.successfulCopy"));
      } catch (e) {
        Toast(this.$t("m.replicationFailed"));
      }

      if (attr) {
        // remove temp target
        target.parentElement.removeChild(target);
      }
    },
    copyShaneUrl() {
      if (this.userObj.referrerCode == "") {
        Toast(this.$t("m.invitationFailed"));
        return;
      }
      this.copy("copyInput", "value");
    }
  }
};
</script>
<style lang="scss" scoped type="text/scss">
#orderDetail {
  .rootMain {
    top: 0.88rem;
    height: calc(100% - 0.88rem);
    overflow-y: auto;
    .topImg {
      position: relative;
      padding: 0;
      height: 5.85rem;
      > div {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: unset;
        color: #fff;
        text-align: center;
        p:first-child {
          font-size: 0.45rem;
          font-weight: bold;
          margin-bottom: 0.2rem;
        }
        p {
          font-size: 0.24rem;
        }
      }
    }
    .con {
      padding: 0.5rem 0.3rem;
      h4 {
        font-weight: bold;
        font-size: 0.26rem;
      }
      > div {
        padding: 0.2rem;
        &.conInfo {
          position: relative;
          .icon1 {
            position: absolute;
            top: 0;
            left: 40%;
            width: 1rem;
            height: 1rem;
          }
        }
        p {
          margin: 0.2rem 0;
        }
        .btn {
          display: block;
        }
      }
    }
  }
}
</style>